<template>
    <div class="wrap">
        <j-tip></j-tip>
        <!-- header -->
        <j-header :settings='header'></j-header>
        <!-- content -->
        <transition :enter-active-class="enterClass"
                    :leave-active-class="leaveClass">
            <keep-alive>
                <router-view class="view-wrap"></router-view>
            </keep-alive>
        </transition>
        <!-- footer -->
        <j-footer :settings="footer"></j-footer>
    </div>
</template>

<script>
    import JFooter from 'components/j-footer'
    import JHeader from 'components/j-header'
    import JTip from 'components/j-tip'

    import EventBus from 'eventbusjs'
    import { mapState, mapActions } from 'vuex'
    import {querystring} from 'vux'

    import utils from 'commons/utils'
    import * as constants from 'src/AppConstants'
    import * as types from 'store/mutation-types'
    import storage from 'commons/storage'
    import wechat from 'commons/wechat'

    export default {
        components: {
            JHeader,
            JFooter,
            JTip,
        },
        data(){
            return {

            }
        },
        computed: {
            ...mapState({
                userInfo: (state) => state.userInfo,
                header: (state) => state.header.header,
                footer: (state) => state.footer.footer,
                enterAnimate: (state) => state.enterAnimate,
                leaveAnimate: (state) => state.leaveAnimate,
            }),
            enterClass() {
                return `animated ${this.enterAnimate}`
            },
            leaveClass() {
                return `animated ${this.leaveAnimate}`
            }
        },

        methods: {
            initUser() {
                if (utils.isLogin()) {
                    let apiToken = storage.getItem(constants.CACHE_API_TOKEN)
                    let userInfo = storage.getItem(constants.CACHE_USER_INFO)
                    this.$store.commit(types.UPDATE_API_TOKEN,apiToken)
                    this.$store.commit(types.UPDATE_USER_INFO, userInfo)
                    return
                }
            },
            initApp() {
                // 初始化微信SDK
                wechat.initWeChat()

                // 初始化用户信息
                this.initUser()
            }
        },

        created() {
            this.initApp()  // 初始化APP数据
        }
    }
</script>
<style lang="less">
    @import '~vux/src/styles/reset.less';
    @import '~vux/src/styles/1px.less';
    @import '~vux/src/styles/tap.less';
    @import '~assets/less/variable.less';
    @import '~assets/less/common.less';
    @import "~assets/fonts/iconfont.css";

    html, body {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
    }

    .wrap {
        .animated {
            -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .view-wrap {
            position:absolute;
            left: 0px;
            right: 0px;
        }
    }
</style>
